<template>
	<el-main>
		<el-card shadow="never">
			<el-form ref="ruleForm" :model="form" label-width="100px">
				<el-form-item label="enterlite.conf" prop="title">
					<sc-code-editor ref="editor" v-model="json" mode="javascript" style="width: 100% ;height: auto"></sc-code-editor>
				</el-form-item>
				<el-form-item label="appsetting" prop="list">
					<sc-form-table v-model="form.list" :addTemplate="addTemplate" drag-sort placeholder="暂无数据">
						<el-table-column prop="type" label="类型" width="180">
							<template #default="scope">
								<el-select v-model="scope.row.type" placeholder="请选择">
									<el-option v-for="item in typeDic" :key="item.value" :label="item.label"
											   :value="item.value"></el-option>
								</el-select>
							</template>
						</el-table-column>
						<el-table-column prop="val" label="变量" min-width="180">
							<template #default="scope">
								<el-input v-model="scope.row.val" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
					</sc-form-table>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitForm">保存</el-button>
					<el-button @click="resetForm">重置</el-button>
				</el-form-item>
			</el-form>
		</el-card>
	</el-main>
</template>

<script>
import {defineAsyncComponent} from "vue";

const scCodeEditor = defineAsyncComponent(() => import('@/components/scCodeEditor'));

export default {
	name: 'formtable',
	components:{
		scCodeEditor
	},
	data() {
		return {
			addTemplate: {
				type: '',
				val: '',
			},
			json: ``,
			form: {
				title: "标题",
				list: [
					{
						type: '1',
						val: '100',
					},
					{
						type: '0',
						val: '50',
					}
				]
			},
			typeDic: [
				{
					label: "显示语言",
					value: "language"
				},
				{
					label: "MTU值",
					value: "mtu_value"
				},
				{
					label: "是否启用SaaS模式",
					value: "use_saas_mode"
				},
				{
					label: "是否开启我的主页功能",
					value: "auto_open_web"
				},
				{
					label: "协议类型",
					value: "protocol_type"
				},
				{
					label: "网卡名称",
					value: "interface_name"
				},
				{
					label: "HTTPorHTTPS",
					value: "http_proto"
				},
				{
					label: "服务器地址",
					value: "server_address"
				},
				{
					label: "产品名称",
					value: "product_name"
				},
				{
					label: "主题颜色",
					value: "theme_color"
				},
				{
					label: "是否自动登录",
					value: "auto_login_enable"
				},
				{
					label: "是否显示切换登录功能",
					value: "switch_login_enable"
				},
				{
					label: "首次激活是否启动短信验证",
					value: "without_sms"
				},
				{
					label: "配置本地上游dns服务器的IP",
					value: "intranet_dns"
				},
				{
					label: "是否记录本地dns服务解析日志",
					value: "intranet_dns_log"
				},
				{
					label: "UI界面的日志级别",
					value: "log_level"
				},
				{
					label: "svc服务的日志级别",
					value: "svc_log_level"
				},
				{
					label: "是否自动导入证书",
					value: "auto_import_cert"
				},
				{
					label: "是否自动使用凭证登录",
					value: "auto_login_with_credential"
				}
			],
			rules: {
				title: [
					{required: true, message: '请上传', trigger: 'blur'}
				]
			}
		}
	},
	methods: {
		submitForm() {
			this.$refs.ruleForm.validate((valid) => {
				if (valid) {
					alert('请看控制台输出');
					console.log(this.form.list);
				} else {
					return false;
				}
			})
		},
		resetForm() {
			this.$refs.ruleForm.resetFields();
		}
	}
}
</script>
